<template>
  <div class="v-modal-style">
    <el-collapse>
      <el-collapse-item title="1.单个绑定" name="1">
        <div>
          <el-card class="box-card">
            <template #header>
              <div class="card-header">
                <span>单个绑定功能体验</span>
              </div>
            </template>
            <my-input v-model:title="title"></my-input>
            <p>当前的值是（我在调用组件中）：{{title}}</p>
          </el-card>
          <el-card class="box-card">
            <template #header>
              <div class="card-header">
                <span>单个绑定代码实现</span>
              </div>
            </template>
            <el-divider content-position="left">组件代码,组件名：my-input</el-divider>
            <textarea style="height: 150px;" disabled>
              -------------------- html区域 --------------------------
              <input type="text" :value="title" @input="$emit('update:title', $event.target.value)">

              -------------------- js区域 --------------------------
              emits: ['update:title'],
              props: {
                title: String
              }
            </textarea>
                <el-divider content-position="left">调用组件代码</el-divider>
                <textarea disabled>
              <my-input v-model:title="title"></my-input>
            </textarea>
          </el-card>
        </div>
      </el-collapse-item>
      <el-collapse-item title="2.多个绑定" name="2">
        <div>
          <el-card class="box-card">
            <template #header>
              <div class="card-header">
                <span>多个绑定功能体验</span>
              </div>
            </template>
            <div>
              <my-inputs v-model:firstName="firstName"></my-inputs>
              <p>当前的firstName值是：{{firstName}}</p>
            </div>
            <div>
              <my-inputs v-model:lastName="lastName"></my-inputs>
              <p>当前的lastName值是：{{lastName}}</p>
            </div>
          </el-card>
          <el-card class="box-card">
            <template #header>
              <div class="card-header">
                <span>多个绑定代码实现</span>
              </div>
            </template>
            <el-divider content-position="left">组件代码,组件名：my-inputs</el-divider>
            <textarea style="height: 320px" disabled>
              -------------------- html区域 --------------------------
              <input
                v-if="firstName"
                type="text"
                :value="firstName"
                @input="$emit('update:firstName', $event.target.value)">

              <input
                v-if="lastName"
                type="text"
                :value="lastName"
                @input="$emit('update:lastName', $event.target.value)">

              -------------------- js区域 --------------------------
              emits: ['update:firstName', 'update:lastName'],
              props: {
                firstName: String,
                lastName: String
              }
            </textarea>
                <el-divider content-position="left">调用组件代码</el-divider>
                <textarea style="height: 60px" disabled>
              <my-inputs v-model:firstName="firstName"></my-inputs>
              <my-inputs v-model:lastName="lastName"></my-inputs>
            </textarea>
          </el-card>
        </div>
      </el-collapse-item>
      <el-collapse-item title="3.自定义修饰符" name="3">
        <div>
          <el-card class="box-card">
            <template #header>
              <div class="card-header">
                <span>自定义修饰符体验</span>
              </div>
            </template>
            <div>
              <h2>不带参数的</h2>
              <CustomModifiers v-model.my="customModifiers1"></CustomModifiers>
            </div>
            <div>
              <h2>带参数的</h2>
              <CustomModifiers v-model:myValue.my="customModifiers2"></CustomModifiers>
            </div>
          </el-card>
          <el-card class="box-card">
            <template #header>
              <div class="card-header">
                <span>自定义修饰符实现</span>
              </div>
            </template>
            <el-divider content-position="left">组件代码,组件名：CustomModifiers</el-divider>
            <textarea style="height: 600px" disabled>
              -------------------- html区域 --------------------------
              <template>
                -- 不带参数时默认绑定modelValue，自定义修饰符modelModifiers --
                <input v-if="!myValue" type="text" :value="modelValue" @input="emitFun1">
                -- 带参数时绑定（=绑定的变量）myValue，自定义修饰符（=绑定的变量+Modifiers）myValueModifiers --
                <input v-else type="text" :value="myValue" @input="emitFun2">
              </template>

              -------------------- js区域 --------------------------
              props: {
                modelValue: String,
                modelModifiers: {
                  default: () => ({})
                },
                myValue: String,
                myValueModifiers: {
                  default: () => ({})
                }
              },
              emits: ['update:modelValue', 'update:myValue'],
              setup(props, {emit}) {
                function emitFun1(e) {
                  let val = e.target.value
                  if (props.modelModifiers.my) {
                    val = val.charAt(0).toUpperCase() + val.slice(1)
                  }
                  emit('update:modelValue', val)
                }
                function emitFun2(e) {
                  let val = e.target.value
                  if (props.myValueModifiers.my) {
                    val = val.toUpperCase()
                  }
                  emit('update:myValue', val)
                }
                return {
                  emitFun1,
                  emitFun2
                }
              }
            </textarea>
            <el-divider content-position="left">调用组件代码</el-divider>
            <textarea style="height: 60px" disabled>
              <CustomModifiers v-model.my="customModifiers1"></CustomModifiers>
              <CustomModifiers v-model:myValue.my="customModifiers2"></CustomModifiers>
            </textarea>
          </el-card>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
  import {ref} from 'vue'
  import MyInput from './my-input.vue'
  import MyInputs from './my-inputs.vue'
  import CustomModifiers from './CustomModifiers.vue'

  export default {
    name: "v-model",
    components: {
      MyInput,
      MyInputs,
      CustomModifiers
    },
    setup() {
      const title = ref('我是挑剔')
      const firstName = ref('我是firstName')
      const lastName = ref('我是lastName')
      const customModifiers1 = ref('我是customModifiers1')
      const customModifiers2 = ref('我是customModifiers2')
      return {
        title,
        firstName,
        lastName,
        customModifiers1,
        customModifiers2
      }
    }
  }
</script>

<style scoped lang="scss">
  .v-modal-style {
    line-height: 2;
    textarea {
      width: 100%;
      min-height: 50px;
    }
  }
</style>
